<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习2：CSS模块化实践</title>
</head>
<body>
    <div class="app">
        <!-- 在这里实现你的组件库 -->
    </div>
</body>
</html>

<!-- 
练习要求：创建一个模块化的组件库

1. 文件结构
   创建以下文件：
   /styles/
     ├── base/
     │   ├── reset.css     (基础重置样式)
     │   ├── variables.css (全局变量)
     │   └── utilities.css (工具类)
     ├── components/
     │   ├── button.css    (按钮组件)
     │   ├── card.css      (卡片组件)
     │   ├── form.css      (表单组件)
     │   └── modal.css     (模态框组件)
     └── main.css          (主样式文件)

2. 实现要求

   2.1 基础设置
   - 使用CSS变量定义主题颜色、间距、字体等
   - 实现响应式的排版系统
   - 创建常用的工具类（间距、文本对齐等）

   2.2 组件实现
   - 按钮组件：
     * 基础按钮
     * 轮廓按钮
     * 不同尺寸
     * 禁用状态
     * 带图标按钮

   - 卡片组件：
     * 基础卡片
     * 带图片卡片
     * 带标题卡片
     * 可操作卡片

   - 表单组件：
     * 输入框
     * 复选框
     * 单选框
     * 下拉选择
     * 表单布局

   - 模态框组件：
     * 基础模态框
     * 不同尺寸
     * 自定义头部和底部
     * 动画效果

3. 模块化要求
   - 使用BEM命名规范
   - 实现组件的变体和修饰符
   - 保持组件的独立性和可复用性
   - 避免样式冲突和样式泄露

4. 性能优化
   - 合理使用选择器
   - 避免深层嵌套
   - 利用CSS变量减少重复代码
   - 实现按需加载的文件结构

5. 文档要求
   - 为每个组件编写使用说明
   - 提供示例代码
   - 说明组件的变体和修饰符
   - 注明浏览器兼容性

6. 额外挑战
   - 实现组件的主题切换
   - 添加组件的动画效果
   - 实现组件的响应式设计
   - 添加无障碍支持
   - 实现组件状态的管理

参考实现方式：

1. 变量定义示例：
```css
:root {
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --danger: #dc3545;
    --spacing-unit: 8px;
    --border-radius: 4px;
}
```

2. BEM命名示例：
```css
.button { /* 块 */ }
.button--primary { /* 修饰符 */ }
.button__icon { /* 元素 */ }
```

3. 工具类示例：
```css
.mt-1 { margin-top: var(--spacing-unit); }
.mb-2 { margin-bottom: calc(var(--spacing-unit) * 2); }
.text-center { text-align: center; }
```

4. 组件变体示例：
```css
.card { /* 基础样式 */ }
.card--featured { /* 特色变体 */ }
.card--compact { /* 紧凑变体 */ }
```

5. 响应式设计示例：
```css
@media (max-width: 768px) {
    .card {
        margin: var(--spacing-unit);
    }
}
```

完成后，你的组件库应该：
- 结构清晰，易于维护
- 组件独立，可复用
- 样式统一，主题可切换
- 性能优化，代码精简
- 文档完善，示例丰富
-->
